<template>
  <div>
    <DetailPanel :dataSource="detailData" :columns="detailColumns" />
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :columns="tableColumns"
      :tableData="tableData"
      @handleTableData="handleTableData"
      :pagination-display="paginationDisplay"
    />
    <PresentTimeCard
      v-if="presentTimeCardVisible"
      :visible.sync="presentTimeCardVisible"
      @refreshTable="refreshTable"
      :items="presentItems"
      :card-attr="detailData"
      :api="api"
    ></PresentTimeCard>
    <PresentAndEnergy
      v-if="presentAndEnergyCardVisible"
      :visible.sync="presentAndEnergyCardVisible"
      @refreshTable="refreshTable"
      :items="presentItems"
      :card-attr="detailData"
      :api="api"
    ></PresentAndEnergy>
  </div>
</template>
<script>
import DetailPanel from '@/components/DetailPanel'
import TableSearch from '@/components/TableSearch'
import PresentTimeCard from '@/components/PresentTimeCard'
import PresentAndEnergy from '@/components/PresentAndEnergy'
import {
  electricCardDetail,
  selectTimeCardStation,
  selectMerchantTimeCardRules,
  presentTimeCard,
  selectAndEnergyCard,
  presentAndEnergyCard,
} from '@/api/device'
import { typeMap } from '@/utils/format'

export default {
  name: 'ElectricCardDetail',
  components: { DetailPanel, TableSearch, PresentTimeCard, PresentAndEnergy },
  data() {
    return {
      paginationDisplay: false,
      presentTimeCardVisible: false,
      presentAndEnergyCardVisible: false,
      presentItems: [],
      api: {},
      cardAttr: {},
      detailData: {},
      detailColumns: [
        {
          label: '卡号',
          value: 'cardNum',
        },
        {
          label: '绑定账号',
          value: 'mobile',
        },
        {
          label: '默认充电时长',
          value: 'timeLength',
        },
        {
          label: '卡状态',
          formatter: (data) => typeMap.electricCardStatus[data.status],
        },
      ],
      tableData: {},
      tableBtns: [
        {
          label: '和能量赠送',
          click: (row) => {
            this.presentAndEnergyCardVisible = true
            this.presentItems = [
              'andEnergyType',
              'andEnergyCardRuleId',
              'energyPoint',
              'andEnergyCardExpire',
            ]
            this.cardAttr = row
            this.api = {
              andEnergyRule: selectAndEnergyCard,
              submit: presentAndEnergyCard,
            }
          },
          icon: 'el-icon-present',
          resourceId:
            '/web/device-management/chargeCard-management/detail/和能量赠送',
        },
        {
          label: '时长卡赠送',
          click: (row) => {
            this.presentTimeCardVisible = true
            this.presentItems = [
              'staId',
              'timeCardType',
              'timeCardRule',
              'initialTime',
              'timeCardExpire',
            ]
            this.cardAttr = row
            this.api = { staId: selectTimeCardStation, submit: presentTimeCard }
          },
          icon: 'el-icon-present',
          resourceId:
            '/web/device-management/chargeCard-management/detail/时长卡赠送',
        },
        {
          label: '通用时长卡赠送',
          click: () => {
            this.presentTimeCardVisible = true
            this.presentItems = ['merchantType', 'timeCardRule']
            this.api = {
              merchantType: selectMerchantTimeCardRules,
              submit: presentTimeCard,
            }
          },
          icon: 'el-icon-present',
          resourceId:
            '/web/device-management/chargeCard-management/detail/通用时长卡赠送',
        },
      ],
      tableColumns: [
        {
          label: '券码',
          resourceId:
            '/web/device-management/chargeCard-management/detail/券码',
          formatter: (row) => row.andEnergyCardId || row.integralId,
        },
        {
          label: '订单类型',
          prop: 'type',
          formatter: (row) =>
            typeMap.timeCardType[row.type] || typeMap.andEnergyType[row.type],
          resourceId:
            '/web/device-management/chargeCard-management/detail/订单类型',
        },
        {
          label: '用户手机号',
          prop: 'userMobile',
          resourceId:
            '/web/device-management/chargeCard-management/detail/用户手机号',
        },
        {
          label: '代理商',
          prop: 'merchantName',
          resourceId:
            '/web/device-management/chargeCard-management/detail/代理商',
        },
        {
          label: '订单金额',
          prop: 'money',
          resourceId:
            '/web/device-management/chargeCard-management/detail/订单金额',
        },
        {
          label: '剩余时长/和能量',
          prop: 'restTime',
          formatter: (row) =>
            row.restTime ? row.restTime + '分钟' : row.restPoint + '点',
          resourceId:
            '/web/device-management/chargeCard-management/detail/剩余时长/和能量',
        },
        {
          label: '操作',
          resourceId:
            '/web/device-management/chargeCard-management/detail/操作',
          buttons: [
            {
              label: '查看',
              click: (row) => {
                let path = row.integralId
                  ? `/order/timeCardDetail/order/${row.integralId}`
                  : `/order/andEnergyDetail/${row.andEnergyCardId}`
                this.$router.push(path)
              },
              resourceId:
                '/web/device-management/chargeCard-management/detail/查看',
            },
          ],
        },
      ],
    }
  },
  methods: {
    refreshTable() {},
    handleTableData(params) {
      params.cardNum = this.$route.params.cardNum
      electricCardDetail(params).then((res) => {
        this.detailData = res
        this.tableData = {
          list: this.detailData.timeCardInfos.concat(
            this.detailData.andEnergyCardInfos
          ),
          totalCount: this.detailData.timeCardInfos.totalAmount,
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.detail-wrapper {
  margin-bottom: 16px;
}
</style>
